<template>
    <div>
      <!-- 查询 -->
      <el-form :inline="true">
    <el-form-item label="类别名称">
      <el-input v-model="searchMap.name" placeholder=""></el-input>
    </el-form-item>
    <el-button type="primary" @click="fetchData()">查询</el-button>
    <el-button type="primary" @click="handleEdit('')">新增</el-button>
  </el-form>
  <!-- 弹出框 -->
  <el-dialog title="编辑" :visible.sync="dialogFormVisible">
    <el-form label-width="80px">
      <el-form-item label="菜品名字"><el-input v-model="dish.dishName" /></el-form-item>
      <el-form-item label="菜品单价"><el-input v-model="dish.dishPrice" /></el-form-item>
      <el-form-item label="菜品数目"><el-input v-model="dish.quantityLeft" /></el-form-item>
      <el-form-item label="菜品描述"><el-input v-model="dish.dishDescription" /></el-form-item>
      <el-form-item label="菜品图片"><el-input v-model="dish.dishImg" /></el-form-item>
      <!-- <el-form-item label="状态">
        <el-switch v-model="pojo.status" :active-value="1" :inactive-value="0"></el-switch>
      </el-form-item> -->
      <el-button type="primary" @click="handleSave()">保存</el-button>
      <el-button @click="dialogFormVisible = false">关闭</el-button>
    </el-form>
  </el-dialog>
    <!--表格组件-->
     <el-table :data="list" style="width: 100%" >
      <!--prop 后端返回的json数据的字段名-->
      <el-table-column prop="dishId" label="序号" align="center"></el-table-column>
      <el-table-column prop="dishImg" label="菜品图片" align="center">
        <template slot-scope="scope">
				<span v-if=" scope== 1||1==1">
					<img :src="scope.row.dishImg" style="width: 60px;">
				</span>
				</template>
      </el-table-column>
      <el-table-column prop="dishName" label="菜品名字" align="center"></el-table-column>
      <el-table-column prop="dishPrice" label="菜品单价" align="center"></el-table-column>
      <el-table-column prop="quantityLeft" label="菜品数目" align="center"></el-table-column>
      <el-table-column prop="dishDescription" label="菜品描述" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row.dishId)" type="text" size="small">修改</el-button>
        <el-button @click="handleDelete(scope.row.dishId)" type="text" size="small">删除</el-button>
      </template>
      </el-table-column>
     </el-table>
      <!--分页-->
      <el-pagination
        @size-change="sizeData"
        @current-change="pageData"
        :page-sizes="[5,10,20,30,60]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>
  </template>
  
  <script>
    import axios  from 'axios';
      export default{
          data(){
            return{
              list:[],
              searchMap:{
                page:1,
                limit:10,
                name:'',
                d_merId:''
              },
              count:0,
              dish:{
                dishName:'',
                dishPrice:'',
                quantityLeft:'',
                dishDescription:'',
                dishImg:'	https://i02piccdn.sogoucdn.com/0d2e81231a14a735',
                d_merId:'1'
              },
              dialogFormVisible:false,
              id:''
            }
          },
          created(){
            this.searchMap.d_merId=this.$route.params.merId
            this.dish.d_merId=this.$route.params.merId
             //在创建vue实例后触发初始化钩子函数
             this.fetchData();
          },
          methods:{
            fetchData(){
               //查询所有Dish信息
               console.log(this.searchMap)
              axios({
                url:'http://localhost:8080/dish/select',
                data:{
                  page:this.searchMap.page,
                  limit:this.searchMap.limit,
                  name:this.searchMap.name,
                  merId:this.searchMap.d_merId,
                },
                method:'Post',
              }).then(response=>{
                this.list=response.data
              })
              axios({
                url:'http://localhost:8080/dish/count',
                data:this.searchMap,
                method:'Post',
              }).then(response=>{
                this.count=response.data
              })
            },
            handleSave(){
              if(this.id===null || this.id===''){
                //插入，传入Dish实体参数
                axios({
                  url:'http://localhost:8080/dish/insert',
                  method:'Post',
                  data:this.dish,
                }).then(response =>{
                  this.$message({
                    message:'插入成功',
                    type:'success'
                  })
                  //重新加载列表数据
                  this.fetchData()
                  //关闭弹窗
                  this.dialogFormVisible=false
                  this.id='';
                })
              }else{
                //更新，传入Dish实体参数
                axios({
                  url:'http://localhost:8080/dish/update',
                  method:'Post',
                  data: this.dish,
                }).then(response =>{
                   //新增或者修改成功
                   this.$message({
                    message:'修改成功',
                    type:'success'
                   })
                   //重新加载列表数据
                   this.fetchData()
                   //关闭弹窗
                   this.dialogFormVisible=false
                   this.id='';
              })
              }
            },
            sizeData(size){
              this.searchMap.limit=size
              this.fetchData()
            },
            pageData(page){
              this.searchMap.page=page
              this.fetchData()
            },
            handleEdit(id){
              console.log(id);
              this.id=id
              //打开弹窗
              this.dialogFormVisible=true
              if(id !=''){
                //根据id查询数据绑定到模型上面
                axios({
                  url:'http://localhost:8080/dish/selectById',
                  method:'GET',
                  params:{
                    dishid:id,
                  }
                }).then(response =>{
                  this.dish=response.data;
                })
              }else{
                // this.dish //清空数据
                this.dish.dishName='',
                this.dish.dishPrice='',
                this.dish.quantityLeft='',
                this.dish.dishDescription=''
              }
            },
            handleDelete(id){
              this.$confirm('您确定要删除吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  //删除
                  axios({
                  url:'http://localhost:8080/dish/delete',
                  method:'GET',
                  params:{
                    dishid:id,
                }
                }).then(response =>{
                      this.$message({
                      type: 'success',
                      message: '删除成功!'
                    });
                    this.fetchData()
                  })
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
              },
          }
      }
</script>